<template>
  <div class="index">
    <div class="time">
            <span>时间范围</span>
            <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary">查询</el-button>
        </div>

      <div ref="box" id="box"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { indexInfo } from '@/api/index.js';
export default {
  data() {
      return {
          todayOrder:"",
          totalAmount:"",
          totalOrder:"",
          totayAmount:"",
          value1:''
      }
  },

  async mounted() {
      let res = await indexInfo()
      console.log(res);
      const myChart = echarts.init(this.$refs.box);
      this.todayOrder=res.data.todayOrder
      this.totalAmount=res.data.totalAmount
      this.totalOrder=res.data.totalOrder
      this.totayAmount=res.data.totayAmount
      // 绘制图表
      myChart.setOption({
          title: {
              text: "订单统计",
              top: 15,
              left: 8,
          },
          tooltip: {
              trigger: "axis",
          },
          legend: {
              data: ["订单", "销售额", ],
          },
          grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
          },
      
          xAxis: {
              type: "category",
              boundaryGap: false,
              data: res.data.xData,
          },
          yAxis: {
              type: "value",
          },
          series: [
              {
                  name: "订单",
                  type: "line",
                  stack: "Total",
                  data: res.data.amountData,
              },
              {
                  name: "销售额",
                  type: "line",
                  stack: "Total",
                  data: res.data.orderData,
              },
              
          ],
         
      });
      // 根据窗口变化图标自适应
      window.onresize=function(){
          myChart.resize()
      }
  },

  // 声明周期函数
  destroyed(){
      window.onresize=null//组件销毁时子弹去除resize事件
  }
};
</script>

<style lang="less" scoped>

.time {


span {
    color: #858585;
    margin-right: 5px;
}

vertical-align: middle;

button {
    margin-left: 15px;
    border: 0;
}

}

#box {
  width: 100%;
  height: 650px;
  margin-top: 20px;
  background-color: #fff;
}
</style>